<template>
    <div>
        <div class="el-descriptions">
            <div class="el-descriptions__header">
                <div class="el-descriptions__title">
                    <el-radio-group v-model="params.type">
                        <el-radio :label="1">只看教学视频</el-radio>
                        <el-radio :label="2">只看教学资料</el-radio>
                    </el-radio-group>
                </div>
                <div class="el-descriptions__extra">
                    <el-button type="danger" icon="el-icon-edit"
                        @click="$refs.teachingCenterDialog.dialogVisible = true">我要发布</el-button>
                </div>
            </div>
        </div>
        <div class="mt-30">
            <div class="list" v-loading="loading">
                <item v-for="(item, index) in list" :key="index" :item="item" />
            </div>

            <el-empty description="暂无教学内容" v-if="isEmpty"></el-empty>

            <div class="text-center mt-30">
                <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                    :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]" layout="total, prev, pager, next"
                    :total="total" hide-on-single-page>
                </el-pagination>
            </div>
        </div>

        <teachingCenterDialog ref="teachingCenterDialog" :publisyType="params.type" :goods_id="params.goods_id"
            @refreshData="handleCurrentChange(1)" />
    </div>
</template>

<script>
import item from "./item.vue"
import teachingCenterDialog from './teachingCenterDialog.vue'
import { getSpuPublishList } from '@/api/apis'

export default {
    name: "display",
    components: {
        item,
        teachingCenterDialog
    },
    data () {
        return {            
            loading: true,
            list: [],
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
                goods_id: this.$route.params.id, // 商品id
                type: 1 // 1: 教学视频 2: 教学资料
            }
        }
    },
    mounted () {
        this.total === 0 && this.getList()
    },
    methods: {
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        getList(){            
            let that = this
            that.loading = true
            getSpuPublishList({
                ...that.params
            }).then(res => {
                if (res.code === 1) {
                    that.list = res.data.data
                    that.total = res.data.total
                    that.params.pagesize = Number(res.data.per_page)
                    that.params.lastPage = res.data.last_page
                    that.isEmpty = !that.list.length
                } else {
                    that.$message.error(res.msg)
                }
            })
            that.loading = false;
        }
    },
    watch: {
        'params.type': {
            handler (val) {
                this.params.page = 1
                this.getList()
            },
            deep: true
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-descriptions__header {
    height: 62px;

    margin-bottom: 0;
    background-color: rgba(46, 48, 51, .05);

    .el-descriptions__title {
        text-indent: 30px;

        .el-radio-group {
            display: flex;

            .el-radio {
                margin-right: 0;

                .el-radio__input {
                    display: inline;
                }

                &.is-checked {
                    .el-radio__inner {
                        border-color: #EF312A;
                        background: #EF312A;
                    }

                    .el-radio__label {
                        color: #606266;
                    }
                }
            }
        }
    }

    .el-descriptions__extra {
        margin-right: 15px;
    }
}

.list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    margin-top: 30px;
}
</style>